<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Solar System Simulation</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #000;
        }
        canvas {
            background-color: #000;
        }
    </style>
</head>
<body>
<canvas id="solarSystem"></canvas>

<script>
    const canvas = document.getElementById('solarSystem');
    const ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    const sun = {
        x: canvas.width / 2,
        y: canvas.height / 2,
        radius: 50,
        color: 'yellow'
    };

    const planets = [
        { radius: 20, color: 'gray', distance: 90, speed: 0.02, angle: 0 },
        { radius: 25, color: 'orange', distance: 140, speed: 0.015, angle: 0 },
        { radius: 30, color: 'blue', distance: 200, speed: 0.01, angle: 0 },
        { radius: 35, color: 'red', distance: 260, speed: 0.007, angle: 0 }
    ];

    function drawSun() {
        ctx.beginPath();
        ctx.arc(sun.x, sun.y, sun.radius, 0, 2 * Math.PI, false);
        ctx.fillStyle = sun.color;
        ctx.fill();
        ctx.closePath();
    }

    function drawPlanet(planet) {
        ctx.beginPath();
        const x = sun.x + planet.distance * Math.cos(planet.angle);
        const y = sun.y + planet.distance * Math.sin(planet.angle);
        ctx.arc(x, y, planet.radius, 0, 2 * Math.PI, false);
        ctx.fillStyle = planet.color;
        ctx.fill();
        ctx.closePath();
    }

    function updatePlanets() {
        planets.forEach(planet => {
            planet.angle += planet.speed;
        });
    }

    function drawOrbit(planet) {
        ctx.beginPath();
        ctx.arc(sun.x, sun.y, planet.distance, 0, 2 * Math.PI, false);
        ctx.strokeStyle = 'rgba(255, 255, 255, 0.1)';
        ctx.stroke();
        ctx.closePath();
    }

    function animate() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawSun();
        planets.forEach(drawOrbit);
        planets.forEach(drawPlanet);
        updatePlanets();
        requestAnimationFrame(animate);
    }

    animate();
</script>
</body>
</html>
